<template>
  <div class="Userproportion_main_box_css">
    <div class="Userproportion_content_box_css" id="Userproportion_content">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
    export default {
        name:'Userproportion',
        data(){
            return{
                option:{
                    title:{
                        text:"平台用户占比"
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                        }
                    ]
                  }
            }
        },
        mounted(){
            // this.UserProportion()
            var that=this
            axios
            .get('http://127.0.0.1/Userproportion')
            .then(function(res){
                console.log(res.data)
                for(var i in res.data){
                   that.option.series[0].data.push({
                        value:res.data[i].toFixed(2),
                        name:i
                   }) 
                }
                console.log(that.option.series[0].data)
                that.UserProportion()
            })
            .catch(function(error){
                console.log(error)
            })
        },
        methods:{
            UserProportion(){
                var chart = echarts.init(document.getElementById("Userproportion_content"));
                chart.setOption(this.option)
            }
        }
    }
</script>

<style>
    .Userproportion_main_box_css{
        width: 24.5vw;
        height: 43vh;
    }
    .Userproportion_content_box_css{
        width: 100%;
        height: 100%;
    }
</style>